Me comentaba Charo que le gustaría decorar su blog con algún efecto primaveral, me sugería un efecto como el que vemos en Navidades de copos cayendo por la página.
Recordé uno de Dynamic Drive con mariposas revoloteando y sustituí algunas mariposas por florecillas que es la idea que ella tiene.
Para añadirlo a nuestro blog nos situamos al final de la plantilla justo antes de </body> y añadimos lo siguiente:


<script language="JavaScript1.2">
//<![CDATA[
/*Flying Butterfly script (By BGAudioDr@aol.com)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, visit http://www.dynamicdrive.com */

var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='url-imagen-mariposas';
floatimages[1]='url-imagen-flor';
floatimages[2]='url-imagen-hoja-verde';
floatimages[3]='url-imagen-mariposas';
floatimages[4]='url-imagen-flor';
floatimages[5]='url-imagen-hoja-verde';
floatimages[6]='url-imagen-flor';

//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px">

<a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>
';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}
//]]>
</script>


Las imágenes las debemos añadir donde dice "url-imagen-flor" "url-imagen-mariposa" "url-imagen-hoja-verde"




La mariposa al ser un gif si lo subimos a Blogger queda estática, pero podemos subirla a ImageShack y solucionamos el problema.

Provisionalmente se puede ver el resultado aquí.
Unknown

Que maravilla que ya comenzarán la primavera :) y la nieve los dejara por un buen tiempo :) en el caso de nosotros ya se viene el otoño y el pisar de las hojas secas en el suelo me encantaaaaaaaa ;)

Hoy corrigiendo el blog probe subir mis imagenes a Picasa al album del blog y los gif animados que estan en mi blog funcionan sin problema y al parecer demora menos en cargar. :D
Como no sabia si sabias quise contarte y agradecerte este lindo truco, besotes ronroneados en mi abrazo ^_^

Responder
majka.

Gracias, Gema, siempre con ideas fáciles, de simple aplicación y elegantes... Ay! qué miedo dá la primavera!!! jeje

Responder
Perinqué

Hola,Gema,me encanta este efecto.He estado intentando aplicarlo,pero no me sale.Tengo una duda:de los enlaces que facilitan en imageshack,¿cuál de ellos es que el que hay que escoger? Gracias.

Responder
Eroz

Con esta imagen http://www.narceaweb.narceadigital.com/Portadas_old/portadas_7/portadas_7/pag_7_a/hoja.gif girada en varias formas se veria padre aunque algo otoñal =O (fuera de temporada verdaa lol)

Responder
Gem@

:: Buen dato Σ=o) Pau, siempre será mejor en el mismo Blogger es decir en Picasa que en cualquier sitio externo. Gracias!!

:: Tara no lo he encontrado añadido en ninguno en tus blogs, no sé si el problema es la imagen o algún otro. El que debemos copiar es el que dice enlace directo y una buena opción la que ofrece Pau de subirlas a Picasa :)

:: Hola Eroz, una hoja así es la que lleva el script de Dynamic Drive pero en color rojo, el poner flores es a petición de Charo.
Gracias por el aporte :)

Responder
Gem@

:: majka que no te había visto :S
Gracias por comentar ;)

Responder
Liyber G.

¡Vaya, que chevere! Y se pierden al darles un clic xD!

Responder
Gem@

:: Saludos Liyber me alegra que te guste, no me había dado cuenta de ese detalle :)

Responder
Zinquirilla

Me encanta la idea, hasta ahora sólo conocía el efecto nieve para Navidad :)

Responder
Gem@

:: Me alegra que te guste Zinquirilla :)
¿Sabes que tengo una foto con esa misma pose que la de tu avatar? :D

Responder
Maria Jesus Novillas Mancho

Voy a probar este efecto.

Gracias Gema

Chus

Responder
Gem@

:: Suerte :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top